<template>
  <div class="shippingaddress">
    <!-- 顶部导航 -->
    <van-nav-bar
        title="收货地址"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      />
      <div>
       <span>联系人</span><input type="text" v-model="item.name"/>
      </div>
      <div>
        <span>电话</span><input type="text"  v-model="item.phone"/>
      </div>
      <div>
        <span>地址</span><input type="text" v-model="item.address"/>
      </div>
      

    <button @click="request_address_del(del)">删除</button>
    <button @click="request_address_edit(item)">确定</button>
  </div>
</template>

<script>
import { mapState,mapMutations,mapActions } from 'vuex'
import {address_del} from '../utils/api'
export default {
  data(){
    return{
      del:{
        userid:this.$store.state.userid,
        addressid:JSON.parse(this.$route.query.list).id,
      },
      item:{},
    }
  },
  computed:{
    ...mapState(['addresslist','userid']),
  },
 mounted(){
  this.item =JSON.parse(this.$route.query.list);
  console.log(this.item);
 },
  methods:{
    // 获取用户的userid
  //mapMutations()这个工具函数 会将vuex中的同步方法 映射到组件的methods中.
  ...mapMutations([]),
    //mapActions()这个工具函数 会将vuex中的异步方法 映射到组件的methods中.
    ...mapActions(['request_address_del','request_address_edit']),

  // item(del){
  //   console.log(del.addressid);
  //   console.log(this.addresslist);
  //   var item = this.addresslist.find((item)=>{
  //     console.log(del.addressid);
  //     return item.id == del.addressid ;
  //   })
  //   console.log(item);
  //   return item;
  // }
}
}
</script>

<style lang="scss" scoped>
.shippingaddress{
  font-size: 18px;
  padding: 10px;
  div {
    width: 100%;
    line-height: 40px;
    border-bottom: 1px solid #f5f5f5;
    float: left;
    span{
      width: 80px;
      display: block;
      float: left;
      padding-left: 20px;
    }
    margin: 5px 0;
  }
  button{
    text-align: center;
    margin-top: 20px;
    border: 0;
    float: left;
    padding: 13px 56px;
    margin-left: 15px;
    font-size: 18px;
    &:first-child{
      background-color: lightskyblue;
    }
    &:last-child{
      background-color: lightcoral;
    }
  }
}


input{
  float: right;
  outline: none;
  border: none;
  width: 250px;
}

</style>